<!DOCTYPE html>
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../../frame/elementUI/lib-master/index.js"></script>

    <link rel="stylesheet" href="../../css/back.css" >
    <title>后台分类新增页</title>

</head>
<script>
    $(function () {

    });
</script>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted attached segment" style="padding-top: 5px;height: 70px;padding-left: 100px">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="../host/manage.html"  class="m-item item" ><i class="home icon"></i>博客</a>
            <a href="../type/types.html"  class="m-item active item"><i class="idea icon"></i>分类</a>
            <a href="../record/archives.html"  class="m-item item" ><i class="clone icon"></i>归档</a>
            <a href="../tag/tags.html"  class="m-item item"><i class="tags icon"></i>标签</a>

            <div class="ui right floated dropdown item">
                <div class="text">
                    <img v-bind:src="admin.imgAvatar" class="ui avatar image">
                    <strong >{{admin.username}}</strong>
                </div>
                <i class="ui dropdown icon"></i>
                <div class="menu">
                    <a href="#" class="item">个人中心</a>
                    <a href="/user/logout" class="item">注销</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 二级菜单 -->
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="types-input.html" class="active item">发布</a>
                <a href="types.html" class="item">列表</a>
            </div>
        </div>
    </div>

    <!-- 中间内容 -->
    <div style="padding-top: 40px;">
        <div class="ui container" style="width: 1000px">
            <div>
                <!-- 分类名称 -->
                <el-form :model="types" :rules="rules" ref="types"> <!-- ref:表单验证(和提交数据相同) -->
                    <el-form-item prop="name">  <!-- prop的值与rules里面要验证的字段值是对应 -->
                        <el-input type="text" v-model="types.name" placeholder="请输入分类名称" autocomplete="off">
                            <template #prepend>名称</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-row style="float: right;margin-top: 10px">
                <el-button @click="PreviousUrl()">返回</el-button>
                <el-button type="primary" @click="typeInsert()">提交</el-button>
            </el-row>
        </div>
    </div>


</div>
</body>
    <!-- axios -->
    <script src="../../frame/axios/axios.min.js"></script>
<script>

    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data:{
            admin:{
                username: '',
                imgAvatar: ''
            },
            //分类新增数据规则
            rules: {
                name: [
                    {required: true, message: '此名称不能为空', trigger: 'blur'},
                    { min:2,max:80, message: '此名称不能小于3位,，大于80位', trigger: 'blur'},
                ],  //blur失去焦点
            },
            types:{
                name: ''   //分类名称
            }

        },
        //钩子函数，VUE对象初始化完成后自动执行
        created(){
            this.findData();
        },
        methods: {
            //获取用户信息
            findData() {
                axios({
                    method: "GET",
                    url: "/user/gainData",
                }).then((res) => {
                    console.log(res.data);
                    if (res.data== '') {
                        this.$message('您尚未登录');
                    } else {
                        this.admin.username = res.data.username;
                        this.admin.imgAvatar = res.data.avatar;
                    }
                });
            },
            //新增分类数据
            typeInsert() {
                this.$refs.types.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/type/insert",
                            data: this.types,
                        }).then((res) => {
                            console.log(res.data);
                            if (res.data == false) {
                                this.$message("添加失败");
                            } else {
                                this.$message({
                                    message: "添加成功",
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.href = "types.html";
                                }, 1500)
                            }
                        });
                    } else {
                        this.$message.error('此提交不符合规则');
                        return false;
                    }
                });
            },
            //返回按钮
            PreviousUrl() {
                window.history.back();
            }
        }
    });
</script>
</html>